<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>translate</title>
</head>
<body>
<canvas id="canvas" width="600"height="400">
  <p>Your browserdoes not support the canvas element!</p>
</canvas>

<script type="text/javascript">
    var canvas =document.getElementById("canvas");
    var context2D =canvas.getContext("2d");
    var pic = new Image();
    pic.src ="milaoshu.png";  //注意目录结构，这里是把图片和html放在一个目录的

    //注意下面方法中画笔状态的保护，这在很多情况下都会使用到
    function draw(){
        context2D.clearRect(0,0,600,400);
        context2D.save();//保存画笔状态
        context2D.translate(600/2*Math.random(), 400/2*Math.random());//开始移动画笔
        context2D.drawImage(pic,0, 0);
        context2D.restore();//绘制结束以后，恢复画笔状态
    }

    setInterval(draw, 1000);

</script>
</body>
</html>
